<template>
    <div 
        class="wjy-flow__pane" 
        :class="[paneInfo.dragging ? 'dragging' : '']" 
        @mousedown="paneMousedown" 
        @mouseup="paneMouseup" 
        @mousewheel="paneMousewheel"
        >
        <div
            ref="viewRef"
            class="wjy-flow__view"
            :style="viewStyle"
        >
            <Node ref="flowNode" v-for="(node, index) in nodes" :key="index" :position="node.position" :data-id="index">
                <component :is="node.components"></component>
            </Node>
        </div>
    </div>
</template>
  
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { Node } from '../../index'
import viewHook from './hook/view'

const props = defineProps({
    nodes: Array,
    container: Object,
    scale: Number
})

const containerInfo = ref({})
const scale = ref(props.scale || 1)
const { viewInfo, viewStyle, viewRef, view_mousemove_handler } = viewHook({ containerInfo, scale: scale })
const flowNode = ref(null)

const paneInfo = reactive({
    dragging: false,
    mousedownx: 0,
    mousedowny: 0,
})
// 不能拖动的元素nodeName集合
const dotDrags = ['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT']

const nodeId = ref(0)

const mousemoveHandler = (e) => {
    // const dx = e.clientX - paneInfo.mousedownx
    // const dy = e.clientY - paneInfo.mousedowny
    // props.nodes[nodeId.value].position.x += dx
    // props.nodes[nodeId.value].position.y += dy
}

// 拖拽的是背景
const dragBackground = (e) => {
    // if (e.target.classList.contains('wjy-flow__pane') || e.target.classList.contains('wjy-flow__view')) {
        paneInfo.dragging = true
        viewInfo.mousedownx = e.clientX - containerInfo.value.left
        viewInfo.mousedowny = e.clientY - containerInfo.value.top
        viewInfo.x = viewInfo.diffx || 0
        viewInfo.y = viewInfo.diffy || 0
        document.addEventListener('mousemove', view_mousemove_handler)
    // }
}

// 拖拽的是节点
const dragNode = (e) => {
    // 如果点击的元素是wjy-flow__node这个的子元素，则获得wjy-flow__node这个元素, 这个wjy-flow__node元素内部会有很多子元素，点击子元素，也返回wjy-flow__node这个元素
    if (e.target.closest('.wjy-flow__node') && !dotDrags.includes(e.target.nodeName)) {
        // 获取这个元素的data-id
        nodeId.value = e.target.closest('.wjy-flow__node')?.getAttribute('data-id')
        document.addEventListener('mousemove', mousemoveHandler)
    }
}

const paneMousedown = (e) => {
    paneInfo.mousedownx = e.clientX
    paneInfo.mousedowny = e.clientY
    // console.log(e.target.nodeName, e.target.nodeType)
    // 拖拽的是背景
    // 如果点击的是wjy-flow__pane元素，才设置正在拖拽
    dragBackground(e)
    // 拖拽的是节点
    // dragNode(e)
}

const mousemove = (e) => {
    console.log(1)
    // if (!paneInfo.dragging) return
    // const dx = e.clientX - paneInfo.mousedownx
    // const dy = e.clientY - paneInfo.mousedowny
    // props.nodes[nodeId.value].position.x += dx
    // props.nodes[nodeId.value].position.y += dy
}

const mouseupHandler = (e) => {
    paneInfo.dragging = false
    mousemoveHandler && document.removeEventListener('mousemove', mousemoveHandler)
    view_mousemove_handler && document.removeEventListener('mousemove', view_mousemove_handler)
}

onMounted(() => {
    // 设置容器位置
    nextTick(() => containerInfo.value = props.container.getBoundingClientRect())
    // containerInfo.value = props.container.getBoundingClientRect()
    document.addEventListener('mouseup', mouseupHandler)
    document.addEventListener('mouseup', mouseupHandler)
})
const paneMouseup = (e) => {
    paneInfo.dragging = false
}
const paneMousewheel = (e) => {
    if (e.target.classList.contains('wjy-flow__pane') || e.target.classList.contains('wjy-flow__view')) {
        const x = e.clientX - containerInfo.value.left
        const y = e.clientY - containerInfo.value.top

        // viewInfo.sheelOrigin = `${e.clientX - containerInfo.value.left}px ${e.clientY - containerInfo.value.top}px`
        // 判断滚轮方向
        if (e.deltaY < 0) {
            scale.value += 0.1
        } else {
            scale.value -= 0.1
        }
        console.log(scale.value, e.clientX, e.clientY, x, y)
    }
}
</script>

<style scoped lang="scss">
.wjy-flow__pane {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    cursor: grab;
    .wjy-flow__view {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        transform-origin: 0 0;
        will-change: transform;
        z-index: 1;
    }
}
.dragging {
    cursor: grabbing;
}
</style>